<script setup>
import { ref, onMounted, onUnmounted, getCurrentInstance } from 'vue'
import { Demo }  from './WebGpuCom.js'
import { addLoading, removeLoading } from "../threeRender/utils/loading";

const instance = getCurrentInstance();
defineProps({
    msg: String,
})

  const canvasRef = ref(null);
  let demo = null;
  let dom = null;
  let canvas = null;
  const resizeCanvas = () => {
        if (canvas == null) throw new Error('Canvas not found');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        canvas.style.width = window.innerWidth + 'px';
        canvas.style.height = window.innerHeight + 'px';
  }

  const createCanvas = () => {
      const canvas = document.createElement('canvas');
      canvas.width= window.innerWidth;//画布宽度px
      canvas.height= window.innerHeight;//画布高度px
      canvas.style.background='black';
      return canvas;
  }

  onMounted(() => {
        addLoading();
        dom = document.querySelector("#webGpu-app1");
        canvas = createCanvas();
        dom.appendChild(canvas);
        
        if (canvas == null) {
            throw new Error('Canvas not found');
        }
        if( Demo.instance != null) {
            console.warn("Demo instance already exists : aborting");
            return;
        }
        demo = new Demo(canvas);

        (async () => {
            await demo.init();
        })();

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();
  })

  onUnmounted(()=>{
    // 清理ThreeApp实例
    demo.clear();
    demo = null;
    removeLoading();
  })


</script>

<template>
  <div class="card">
    <div id="webGpu-app1"></div>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
.webgl-app{
  flex: 1 1 0px;
}
</style>
